<template>
  <div>
    <div class="box_2 flex-col">
      <div class="group_4 flex-row">
        <van-nav-bar
          left-arrow
          :border="false"
          @click-left="$router.back()"
          class="left"
        />
        <span class="text_1">账号登录</span>
      </div>
    </div>
    <!-- vant中错误提示输入框 -->
    <van-cell-group inset>
      <van-field
        v-model="username"
        clickable
        autofocus
        class="iptid"
        placeholder="请输入账号"
        @blur="iptid"
      />
      <van-field
        v-model="password"
        clickable
        type="password"
        class="iptpw"
        placeholder="请输入密码"
        @blur="iptpw"
      />
    </van-cell-group>
    <button
      class="button_1 flex-col"
      @click="login"
      ref="login"
      :disabled="disabled"
      :style="{
        background: flag3 ? 'rgba(181, 108, 255, 1)' : 'rgba(153, 153, 153, 1)',
      }"
    >
      <span class="text_4">登录</span>
    </button>
  </div>
  <bottomPolicy class="policy"></bottomPolicy>
</template>
<script>
import bottomPolicy from "@/views/phonelogin/bottomPolicy.vue";
import { Toast } from "vant";
export default {
  components: {
    bottomPolicy,
},
    data() {
        return {
          username:"" ,
          password:"",
         flag1:false,
         flag2:false,
         flag3:false,
         disabled:false,
        
        }
    },
    methods: {
        iptid(){
            const id = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
            if (id.test(this.username)) {
                this.flag1 = true;
            } else {
                // 弹框提示
                Toast("请填写正确的账号");
            }
        },
        // 6-16位,包含数字和小写字母
         iptpw(){
            const pw  = /^.*(?=.{6,16})(?=.*\d)(?=.*[a-z]).*$/;
            if(pw.test(this.password)){
            this.flag2 = true;
              this.flag3 = true;
            }else{
                Toast("请确认您的密码")
            }
        },

        // 选中下方按钮,disable变为true
      login() {
            if (this.$store.state.botChecked) { 
                    this.disabled = true;
            }else{
                Toast("请阅读用户协议，并同意勾选");
            }
        }
    },
  };

</script>

<style lang="less" scoped>

.left{
    width: .15rem;
        height: .15rem;
        position: fixed;
       
        left: .16rem;
        margin-top: .0rem; 
        z-index: 5; 
        float: left;
    color: rgba(51, 51, 51, 1);
}
.text_1 {
  width: 0.555rem;
  height: 0.145rem;
  color: rgba(51, 51, 51, 1);
  font-size: 0.15rem;
  font-family: PingFangSC-Regular;
  text-align: center;
  white-space: nowrap;
  line-height: 0.15rem;
  margin-top: 0.15rem;
  margin-left: 1.595rem;
  float: left;
}
//输入账号
.iptid {
  color: rgba(204, 204, 204, 1);

  height: 0.3rem;
  color: rgba(204, 204, 204, 1);
  font-size: 0.12rem;
  font-family: PingFangSC-Regular;
  text-align: center;
  white-space: nowrap;
  line-height: 0.12rem;
  margin: 0.99rem 0 0 0.2rem;
  border-bottom: 0.005rem solid rgba(204, 204, 204, 1);
}
.iptpw {
  height: 0.3rem;
  color: rgba(204, 204, 204, 1);
  font-size: 0.12rem;
  font-family: PingFangSC-Regular;
  text-align: center;
  white-space: nowrap;
  line-height: 0.12rem;
  margin: 0.205rem 0 0 0.2rem;
  border-bottom: 0.005rem solid rgba(204, 204, 204, 1);
}
// 登录
.button_1 {
  border-radius: 44px;
  height: 0.44rem;
  width: 3.35rem;
  margin: 0.27rem 0 0 0.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.text_4 {
  font-size: 0.14rem;
  color: aliceblue;
  width: 0.28rem;
  height: 0.13rem;
}
.policy {
  position: fixed;
  bottom: 0.735rem;
}
</style>
